{extend name="platform/base" /}
{block name="resources"/}
<style>
	.chairs-css{color: #999;height:30px;line-hegiht:30px;margin-bottom:0;}
	.search-css{float:right;}
	.button-css{border-radius:0;border:1px solid #aaa;height:24px;background-color:#e8e8e8;}
</style>
{/block}
{block name="main"} 
<div class="row padder-v">
	<div class="col-sm-7" >
		 <p class="chairs-css">今日新增会员：{$user_today_num}&nbsp;|&nbsp;本月新增会员：{$user_month_num}&nbsp;|&nbsp;会员总数：{$user_count_num}</p>
	</div>
	<div class="col-sm-2" >
		<input type="text" id="startDate" class="input-sm form-control" placeholder="请选择开始日期" title="开始日期" onclick="WdatePicker()"  value="{$start_date}"/>		
	</div>
	<div class="col-sm-2" >
		<input type="text" id="endDate" placeholder="请选择结束日期" class="input-sm form-control" title="结束日期" onclick="WdatePicker()"  value="{$end_date}" />
	</div>
	<div class="col-sm-1">
		<button class="btn btn-sm btn-default" type="button"
			onclick="showCharts()">搜索</button>
	</div>
</div>
            <div class="row">
              <div class="col-md-12">
               
                <section class="panel panel-default">
                  <header class="panel-heading font-bold">
                  	新增会员
                  </header>
                  <div class="panel-body">
                    <div id="container" style="height:210px"></div>
                  </div>                
                </section>
              </div>
            </div>
            
 <div id="container1" style="height: 400px"></div>          
{/block}
{block name="script"}            
<script type="text/javascript" src="__STATIC__/My97DatePicker/WdatePicker.js"></script>
<script src="__STATIC__/js/highcharts.js"></script>
<script src="__STATIC__/js/exporting.js"></script>           
<script>
$(function () {
    $('#container1').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        title: {
            text: '2014年某网站不同浏览器访问量占比'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
        series: [{
            type: 'pie',
            name: '浏览器占比',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});
$(function(){
	
	showCharts();
}) 
//显示统计图
function  showCharts(){
	$.ajax({
		type : "post",
		url : "{:__URL('PLATFORM_MAIN/statistics/getmembermonthcount')}",
		async : true,
		data:{"start_date":$("#startDate").val(),"end_date":$("#endDate").val()},
		success : function(data) {
			//alert(JSON.stringify(data));
			var chart = new Highcharts.Chart('container', {
				
			    title: {
			        text: '会员新增趋势',
			        x: -20
			    },
			   
			    xAxis: {
			        categories: data[0],
			        tickInterval:5
			    },
			    yAxis: {
			        title: {
			            text: '人数'
			        },
			        plotLines: [{
			            value: 0,
			            width: 1,
			            color: '#808080'
			        }]
			    },
			    credits:{
			        enabled:false // 禁用版权信息
			    },	
			    tooltip: {
			        valueSuffix: '人'
			    },
			    legend: {
			        layout: 'vertical',
			        align: 'right',
			        verticalAlign: 'middle',
			        borderWidth: 0
			    },
			    series: [{
			        name: '新增会员',
			        data: data[1]
			    }]
			});	
		}
	});
	
}
</script>
{/block}
